<template>
    <div class="edu-info">
        <a-form-model ref="form" :model="detail" >
            <a-table
                ref="table"
                :row-key="'index'"
                :columns="infoColumns"
                :data-source="detail.infoList"
                :pagination="false"
                :scroll="{ x: true }"
            >
                <template #eduLevel="item" >
                    <a-form-model-item class="custom-item" :prop="`infoList[${item.index}].eduLevel`" :rules="rules.eduLevel" label=" " :colon="false" :labelCol="tableLayout.labelCol" :wrapperCol="tableLayout.wrapperCol" >
                        <a-select
                            placeholder="请选择"
                            :options="eduLevelList"
                            v-model="item.eduLevel"
                            :style="{ width: '100%' }" >
                        </a-select>
                    </a-form-model-item>
                </template>
                <template #eduType="item" >
                    <a-form-model-item class="custom-item" :prop="`infoList[${item.index}].eduType`" :rules="rules.eduType" label=" " :colon="false" :labelCol="tableLayout.labelCol" :wrapperCol="tableLayout.wrapperCol" >
                        <a-select
                            placeholder="请选择"
                            :options="eduTypeList"
                            v-model="item.eduType"
                            :style="{ width: '100%' }" >
                        </a-select>
                    </a-form-model-item>
                </template>
                <template #degree="item" >
                    <a-form-model-item class="custom-item" :required="false" validateStatus="success" :labelCol="tableLayout.labelCol" :wrapperCol="tableLayout.wrapperCol" >
                        <a-input v-model="item.degree" placeholder="请输入学历类别" />
                    </a-form-model-item>
                </template>
                <template #degreeLevel="item" >
                    <a-form-model-item class="custom-item" :required="false" validateStatus="success" :labelCol="tableLayout.labelCol" :wrapperCol="tableLayout.wrapperCol" >
                        <a-input v-model="item.degreeLevel" placeholder="请输入学位等级" />
                    </a-form-model-item>
                </template>
                <template #majorName="item" >
                    <a-form-model-item class="custom-item" :prop="`infoList[${item.index}].majorName`" :rules="rules.majorName" label=" " :colon="false" :labelCol="tableLayout.labelCol" :wrapperCol="tableLayout.wrapperCol" >
                        <a-textarea v-model="item.majorName" :autoSize="true" placeholder="请输入专业名称" />
                    </a-form-model-item>
                </template>
                <template #graduationTime="item" >
                    <a-form-model-item class="custom-item" :prop="`infoList[${item.index}].graduationTime`" :rules="rules.graduationTime" label=" " :colon="false" :labelCol="tableLayout.labelCol" :wrapperCol="tableLayout.wrapperCol" >
                        <a-date-picker v-model="item.graduationTime" :value-format="'YYYY-MM-DD 00:00:00'" :format="'YYYY-MM-DD'" />
                    </a-form-model-item>
                </template>
                <template #graduationSchool="item" >
                    <a-form-model-item class="custom-item" :prop="`infoList[${item.index}].graduationSchool`" :rules="rules.graduationSchool" label=" " :colon="false" :labelCol="tableLayout.labelCol" :wrapperCol="tableLayout.wrapperCol" >
                        <a-textarea v-model="item.graduationSchool" :autoSize="true" placeholder="请输入毕业院校名称" />
                    </a-form-model-item>
                </template>
                <template #action="item" >
                    <div>
                        <zk-btn @click="handleAddItem(item)" icon="edit">新增</zk-btn>
                        <a-divider type="vertical" /> 
                        <zk-btn @click="handleDelItem(item)" icon="delete">删除</zk-btn>
                    </div>
                </template>
            </a-table>
        </a-form-model>
    </div>
</template>
<script>
    import { notEmptyRule } from '@/appBase/formRules';

    // 学历信息
    export default {
        props: {
            value: {
                type: Array,
                default: () => [],
            },
            infoRequired: {
                type: Boolean,
                default: () => true,
            },
        },
        name: "EduInfo",
        components: {
        },
        data() {
            return {
                // title: '学历信息',
                labelCol: {
                    span: 4
                },
                labelCol2: {
                    span: 2
                },
                /** 布局配置 */
                formLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 4 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 15 }
                    }
                },
                // 列表项布局
                tableLayout: {
                    labelCol: {
                        xs: { span: 24 },
                        sm: { span: 2 }
                    },
                    wrapperCol: {
                        xs: { span: 24 },
                        sm: { span: 20 }
                    }
                },
                eduLevelList: [], // 学历列表
                eduTypeList: [], // 学历性质列表
                detail: {
                    infoList: [], // 学历信息列表
                },
                listError: false, // 列表是否有错误信息
                infoColumns: [
                    {
                        title: '学历',
                        width: '180px',
                        scopedSlots: { customRender: 'eduLevel' },
                    },
                    {
                        title: '性质',
                        width: '160px',
                        scopedSlots: { customRender: 'eduType' },
                    },
                    {
                        title: '学位类别',
                        width: '160px',
                        scopedSlots: { customRender: 'degree' },
                    },
                    {
                        title: '学位等级',
                        width: '150px',
                        scopedSlots: { customRender: 'degreeLevel' },
                    },
                    {
                        title: '专业名称',
                        width: '160px',
                        scopedSlots: { customRender: 'majorName' },
                    },
                    {
                        title: '毕业时间',
                        width: '190px',
                        scopedSlots: { customRender: 'graduationTime' },
                    },
                    {
                        title: '毕业院校',
                        width: '160px',
                        scopedSlots: { customRender: 'graduationSchool' },
                    },
                    {
                        title: ' ',
                        width: '150px',
                        scopedSlots: { customRender: 'action' },
                    },
                ],
            }
        },
        created() {
            this.init();
        },
        computed: {
            rules() {
                return {
                    eduLevel: this.infoRequired ? notEmptyRule({ message: '' }) : null,
                    eduType: this.infoRequired ? notEmptyRule({ message: '' }) : null,
                    majorName: this.infoRequired ? notEmptyRule({ message: '' }) : null,
                    graduationTime: this.infoRequired ? notEmptyRule({ message: '' }) : null,
                    graduationSchool: this.infoRequired ? notEmptyRule({ message: '' }) : null,
                }
            }
        },
        watch: {
            value() {
                this.initValue();
            },
            infoRequired() {
                this.$refs.form.clearValidate();
            },
        },
        methods: {
            async init() {
                this.initValue();
            },
            initValue() {
                if (this.value && this.value.length === 0) {
                    // 新增初始化
                    this.detail.infoList.splice(0);
                    const item = this.createEmptyItem(0);
                    this.detail.infoList.push(item);
                } else {
                    this.detail.infoList.splice(0);
                    this.detail.infoList.push(...this.value);
                    this.resetItemIndex();
                }
            },
            // 禁止的时间
            // disabledDate(current) {
            //     return current && current < moment().subtract(1, 'day');
            // },
            // 创建空列表项
            createEmptyItem(index) {
                return {
                    index,
                    eduLevel: undefined,
                    eduType: undefined,
                    degree: '',
                    degreeLevel: '',
                    majorName: '', 
                    graduationTime: '',
                    graduationSchool: '',
                }
            },
            // 新增列表项
            handleAddItem() {
                const oldIndex = this.detail.infoList.length;
                const newItem = this.createEmptyItem(oldIndex);
                this.detail.infoList.push(newItem);
                this.resetItemIndex();
                this.emitData();
            },
            // 删除列表项
            handleDelItem(item) {
                if (this.detail.infoList.length > 1) {
                    this.detail.infoList.splice(item.index, 1);
                    this.resetItemIndex();
                    this.emitData();
                }
            },
            // 重置列表项索引
            resetItemIndex() {
                this.detail.infoList.forEach((item, index) => {
                    item.index = index;
                });
            },
            emitData() {
                this.$emit('input', this.getData(false));
            },
            getData(filter = true) {
                const list = [];
                let hasValue;
                this.detail.infoList.forEach((item) => {
                    if (filter) {
                        hasValue = false;
                        if (item.eduLevel !== undefined) {
                            hasValue = true;
                        }
                        if (item.eduType !== undefined) {
                            hasValue = true;
                        }
                        if (item.degree !== '') {
                            hasValue = true;
                        }
                        if (item.degreeLevel !== '') {
                            hasValue = true;
                        }
                        if (item.majorName !== '') {
                            hasValue = true;
                        }
                        if (item.graduationTime !== '') {
                            hasValue = true;
                        }
                        if (item.graduationSchool !== '') {
                            hasValue = true;
                        }
                        if (hasValue) {
                            list.push({
                                ...item
                            });
                        }
                    } else {
                        list.push({
                            ...item
                        });
                    }
                });
                return list;
            },
            validate() {
                if (!this.infoRequired) {
                    return true;
                }
                this.$refs.form.validate(async(valid) => {
                    // 因为message: '' 这里的验证永远为true，所以只能自定义验证
                });
                let valid = true;
                let item;
                for(let i = 0; i < this.detail.infoList.length; i ++) {
                    item = this.detail.infoList[i];
                    if (item.eduLevel === undefined || item.eduLevel === null) {
                        valid = false;
                        break;
                    }
                    if (item.eduType === undefined || item.eduType === null) {
                        valid = false;
                        break;
                    }
                    if (!item.majorName) {
                        valid = false;
                        break;
                    }
                    if (!item.graduationTime) {
                        valid = false;
                        break;
                    }
                    if (!item.graduationSchool) {
                        valid = false;
                        break;
                    }
                }
                return valid;
            },
        }
    }
</script>
<style lang="less">
    .edu-info {
        .custom-item {
            margin-bottom: 0;
        }
        .ant-table-thead > tr > th, .ant-table-tbody > tr > td {
            padding: 16px 2px;
        }
    }
</style>